React Suspense: 데이터 페칭 및 코드 분할 종합 가이드

React Suspense는 React 16.6에 도입된 강력한 기능으로, 데이터 로딩이나 코드 다운로드와 같이 무언가를 기다리는 동안 컴포넌트 렌더링을 "일시 중단"할 수 있게 합니다. 이는 로딩 상태를 관리하고 비동기 작업을 우아하게 처리하여 사용자 경험을 개선하는 선언적 방법을 제공합니다. 이 가이드에서는 Suspense의 개념, 사용 사례 및 React 애플리케이션에 구현하는 방법에 대한 실제 예제를 살펴봅니다.

React Suspense란 무엇인가요?

Suspense는 다른 컴포넌트를 감싸는 React 컴포넌트로, 컴포넌트가 Promise가 해결되기를 기다리는 동안 대체 UI(예: 로딩 스피너)를 표시할 수 있게 합니다. 이 Promise는 다음과 관련될 수 있습니다:

• 데이터 페칭: API에서 데이터를 검색하는 것을 기다립니다.
• 코드 분할: JavaScript 모듈이 다운로드되고 구문 분석되기를 기다립니다.

Suspense 이전에는 로딩 상태를 관리하는 것이 종종 복잡한 조건부 렌더링과 비동기 작업을 수동으로 처리하는 것을 포함했습니다. Suspense는 선언적 접근 방식을 제공하여 이를 단순화하고 코드를 더 깔끔하고 유지 관리하기 쉽게 만듭니다.

주요 개념

• Suspense 컴포넌트: <Suspense> 컴포넌트 자체입니다. fallback prop을 받아 감싸진 컴포넌트가 일시 중단되는 동안 표시할 UI를 지정합니다.
• React.lazy(): 컴포넌트를 동적으로 가져와 코드 분할을 가능하게 하는 함수입니다. 컴포넌트가 로드될 때 해결되는 Promise를 반환합니다.
• Promise 통합: Suspense는 Promise와 원활하게 통합됩니다. 컴포넌트가 아직 해결되지 않은 Promise에서 데이터를 렌더링하려고 하면 "일시 중단"하고 대체 UI를 표시합니다.

사용 사례

1. Suspense를 사용한 데이터 페칭

Suspense의 주요 사용 사례 중 하나는 데이터 페칭 관리입니다. 조건부 렌더링을 사용하여 로딩 상태를 수동으로 관리하는 대신 Suspense를 사용하여 데이터가 도착하기를 기다리는 동안 로딩 표시기를 선언적으로 표시할 수 있습니다.

예제: API에서 사용자 데이터 페칭

API에서 페치된 사용자 데이터를 표시하는 컴포넌트가 있다고 가정해 보겠습니다. Suspense 없이 다음과 같은 코드를 사용할 수 있습니다:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>사용자 데이터 로딩 중...</p>;
  }

  if (error) {
    return <p>오류: {error.message}</p>;
  }

  if (!user) {
    return <p>사용자 데이터를 사용할 수 없습니다.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>이메일: {user.email}</p>
    </div>
  );
}

export default UserProfile;

이 코드는 작동하지만 여러 상태 변수(isLoading, error, user)와 조건부 렌더링 로직을 관리해야 합니다. Suspense를 사용하면 SWR 또는 TanStack Query (이전 React Query)와 같은 데이터 페칭 라이브러리를 사용하여 이를 단순화할 수 있으며, 이 라이브러리는 Suspense와 원활하게 작동하도록 설계되었습니다.

SWR을 Suspense와 함께 사용하는 방법은 다음과 같습니다:

import React from 'react';
import useSWR from 'swr';

// 간단한 fetcher 함수
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>오류: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>이메일: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>사용자 데이터 로딩 중...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

이 예제에서는:

• useSWR을 사용하여 사용자 데이터를 페치합니다. suspense: true 옵션은 데이터가 아직 사용할 수 없는 경우 SWR에 Promise를 throw하도록 지시합니다.
• UserProfile 컴포넌트는 로딩 또는 오류 상태를 명시적으로 관리할 필요가 없습니다. 데이터가 사용 가능하면 단순히 사용자 데이터를 렌더링합니다.
• <Suspense> 컴포넌트는 SWR에서 throw된 Promise를 catch하고 데이터가 페치되는 동안 대체 UI(<p>사용자 데이터 로딩 중...</p>)를 표시합니다.

이 접근 방식은 컴포넌트 로직을 단순화하고 데이터 페칭을 더 쉽게 이해할 수 있도록 합니다.

데이터 페칭에 대한 전역 고려 사항:

전 세계 사용자를 위한 애플리케이션을 구축할 때 다음을 고려하십시오:

• 네트워크 지연 시간: 지리적으로 다른 위치에 있는 사용자는 다양한 네트워크 지연 시간을 경험할 수 있습니다. Suspense는 원격 서버에서 데이터를 페치하는 동안 로딩 표시기를 표시하여 더 나은 사용자 경험을 제공하는 데 도움이 될 수 있습니다. 사용자와 더 가까운 곳에 데이터를 캐시하기 위해 콘텐츠 전송 네트워크(CDN)를 사용하는 것을 고려하십시오.
• 데이터 현지화: API가 데이터 현지화를 지원하는지 확인하여 사용자의 선호하는 언어와 형식으로 데이터를 제공할 수 있도록 합니다.
• API 가용성: 일관된 사용자 경험을 보장하기 위해 여러 지역에서 API의 가용성과 성능을 모니터링합니다.

2. React.lazy() 및 Suspense를 사용한 코드 분할

코드 분할은 애플리케이션을 더 작은 청크로 분할하여 필요에 따라 로드할 수 있는 기술입니다. 특히 크고 복잡한 프로젝트의 경우 애플리케이션의 초기 로드 시간을 크게 개선할 수 있습니다.

React는 컴포넌트 코드 분할을 위해 React.lazy() 함수를 제공합니다. Suspense와 함께 사용하면 컴포넌트가 다운로드되고 구문 분석되기를 기다리는 동안 대체 UI를 표시할 수 있습니다.

예제: 컴포넌트 지연 로딩

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>로딩 중...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

이 예제에서는:

• React.lazy()를 사용하여 OtherComponent를 동적으로 가져옵니다. 이는 컴포넌트가 로드될 때 해결되는 Promise를 반환합니다.
• <OtherComponent />를 <Suspense>로 감싸고 fallback prop을 제공합니다.
• OtherComponent가 로드되는 동안 대체 UI(<p>로딩 중...</p>)가 표시됩니다. 컴포넌트가 로드되면 대체 UI를 대체합니다.

코드 분할의 이점:

• 초기 로드 시간 개선: 초기 보기에 필요한 코드만 로드함으로써 애플리케이션이 상호 작용 가능하게 되는 데 걸리는 시간을 줄일 수 있습니다.
• 번들 크기 축소: 코드 분할은 JavaScript 번들의 전체 크기를 줄이는 데 도움이 될 수 있으며, 이는 특히 저대역폭 연결에서 성능을 향상시킬 수 있습니다.
• 더 나은 사용자 경험: 더 빠른 초기 로드와 필요할 때만 코드를 로드함으로써 더 원활하고 반응성이 뛰어난 사용자 경험을 만들 수 있습니다.

고급 코드 분할 기법:

• 경로 기반 코드 분할: 경로에 따라 애플리케이션을 분할하여 각 경로가 필요한 코드만 로드하도록 합니다. 이는 React Router와 같은 라이브러리를 사용하여 쉽게 달성할 수 있습니다.
• 컴포넌트 기반 코드 분할: 특히 크거나 자주 사용되지 않는 컴포넌트의 경우 개별 컴포넌트를 별도의 청크로 분할합니다.
• 동적 가져오기: 사용자 상호 작용 또는 기타 조건에 따라 필요에 따라 코드를 로드하기 위해 컴포넌트 내에서 동적 가져오기를 사용합니다.

3. 동시 모드 및 Suspense

Suspense는 React의 동시 모드, 즉 React가 여러 작업을 동시에 처리할 수 있도록 하는 새로운 기능 집합의 핵심 요소입니다. 동시 모드를 사용하면 React가 중요한 업데이트의 우선순위를 지정하고, 오래 실행되는 작업을 중단하고, 애플리케이션의 응답성을 향상시킬 수 있습니다.

동시 모드와 Suspense를 사용하면 React는 다음을 수행할 수 있습니다:

• 모든 데이터가 준비되기 전에 컴포넌트 렌더링 시작: React는 일부 데이터 종속성이 아직 페치 중이더라도 컴포넌트 렌더링을 시작할 수 있습니다. 이를 통해 React는 부분 UI를 더 일찍 표시하여 애플리케이션의 인지된 성능을 향상시킬 수 있습니다.
• 렌더링 중단 및 재개: React가 컴포넌트를 렌더링하는 동안 우선순위가 더 높은 업데이트가 들어오면 렌더링 프로세스를 중단하고, 우선순위가 더 높은 업데이트를 처리한 다음, 나중에 컴포넌트 렌더링을 재개할 수 있습니다.
• 메인 스레드 차단 방지: 동시 모드를 사용하면 React가 메인 스레드를 차단하지 않고 오래 실행되는 작업을 수행할 수 있으므로 UI가 응답하지 않게 되는 것을 방지할 수 있습니다.

동시 모드를 활성화하려면 React 18에서 createRoot API를 사용할 수 있습니다:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // 루트 생성
root.render(<App />);

Suspense 사용 모범 사례

• 데이터 페칭 라이브러리 사용: Suspense와 원활하게 작동하도록 설계된 SWR 또는 TanStack Query와 같은 데이터 페칭 라이브러리를 사용하는 것을 고려하십시오. 이러한 라이브러리는 캐싱, 자동 재시도 및 오류 처리와 같은 기능을 제공하여 데이터 페칭 로직을 단순화할 수 있습니다.
• 의미 있는 대체 UI 제공: 대체 UI는 무언가 로딩 중임을 명확하게 나타내야 합니다. 스피너, 진행률 표시줄 또는 스켈레톤 로더를 사용하여 시각적으로 매력적이고 유익한 로딩 경험을 만드십시오.
• 오류를 우아하게 처리: 오류 경계를 사용하여 렌더링 중에 발생하는 오류를 catch하십시오. 이렇게 하면 전체 애플리케이션이 충돌하는 것을 방지하고 더 나은 사용자 경험을 제공할 수 있습니다.
• 코드 분할 최적화: 애플리케이션의 초기 로드 시간을 줄이기 위해 전략적으로 코드 분할을 사용하십시오. 크거나 자주 사용되지 않는 컴포넌트를 식별하고 별도의 청크로 분할하십시오.
• Suspense 구현 테스트: Suspense 구현이 올바르게 작동하고 애플리케이션이 로딩 상태와 오류를 우아하게 처리하는지 확인하기 위해 철저히 테스트하십시오.

오류 경계를 사용한 오류 처리

Suspense는 *로딩* 상태를 처리하는 반면, 오류 경계는 렌더링 중 *오류* 상태를 처리합니다. 오류 경계는 자식 컴포넌트 트리에서 JavaScript 오류를 catch하고, 해당 오류를 기록하고, 전체 컴포넌트 트리가 충돌하는 대신 대체 UI를 표시하는 React 컴포넌트입니다.

다음은 오류 경계의 기본 예입니다:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 상태 업데이트
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류 보고 서비스에 오류를 기록할 수도 있습니다.
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 사용자 정의 대체 UI를 렌더링할 수 있습니다.
      return <h1>무언가 잘못되었습니다.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

오류 경계를 사용하려면 오류를 발생시킬 수 있는 컴포넌트 주위에 래핑하십시오:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Suspense와 오류 경계를 결합하면 로딩 상태와 오류를 모두 우아하게 처리하는 강력하고 탄력적인 애플리케이션을 만들 수 있습니다.

실제 사례

다음은 Suspense를 사용하여 사용자 경험을 개선할 수 있는 몇 가지 실제 사례입니다:

• 전자 상거래 웹사이트: Suspense를 사용하여 제품 세부 정보 또는 이미지를 페치하는 동안 로딩 표시기를 표시합니다. 이렇게 하면 사용자가 데이터 로드를 기다리는 동안 빈 페이지를 보는 것을 방지할 수 있습니다.
• 소셜 미디어 플랫폼: 사용자가 페이지를 아래로 스크롤함에 따라 댓글 또는 게시물을 지연 로드하기 위해 Suspense를 사용합니다. 이렇게 하면 페이지의 초기 로드 시간이 개선되고 다운로드해야 하는 데이터 양이 줄어들 수 있습니다.
• 대시보드 애플리케이션: 차트 또는 그래프 데이터를 페치하는 동안 로딩 표시기를 표시하기 위해 Suspense를 사용합니다. 이렇게 하면 더 원활하고 반응성이 뛰어난 사용자 경험을 제공할 수 있습니다.

예제: 국제 전자 상거래 플랫폼

전 세계적으로 제품을 판매하는 국제 전자 상거래 플랫폼을 고려하십시오. 플랫폼은 Suspense와 React.lazy()를 활용하여 다음을 수행할 수 있습니다:

• 제품 이미지 지연 로드: React.lazy()를 사용하여 제품 이미지가 뷰포트에 표시될 때만 로드합니다. 이렇게 하면 제품 목록 페이지의 초기 로드 시간을 크게 단축할 수 있습니다. 실제 이미지가 로드되는 동안 플레이스홀더 이미지를 표시하기 위해 각 지연 로드된 이미지를 <Suspense fallback={<img src="placeholder.png" alt="로딩 중..." />}>로 감쌉니다.
• 국가별 컴포넌트 코드 분할: 플랫폼에 국가별 컴포넌트(예: 통화 형식, 주소 입력 필드)가 있는 경우 React.lazy()를 사용하여 사용자가 특정 국가를 선택할 때만 이러한 컴포넌트를 로드합니다.
• 현지화된 제품 설명 페치: Suspense를 사용하는 SWR과 같은 데이터 페칭 라이브러리를 사용하여 사용자의 선호하는 언어로 제품 설명을 페치합니다. 현지화된 설명이 페치되는 동안 로딩 표시기를 표시합니다.

결론

React Suspense는 React 애플리케이션의 사용자 경험을 크게 향상시킬 수 있는 강력한 기능입니다. 로딩 상태 및 코드 분할을 관리하는 선언적 방법을 제공함으로써 Suspense는 코드를 단순화하고 비동기 작업을 더 쉽게 이해할 수 있도록 합니다. 소규모 개인 프로젝트를 구축하든 대규모 기업 애플리케이션을 구축하든 Suspense는 더 원활하고 반응성이 뛰어나며 성능이 뛰어난 사용자 경험을 만드는 데 도움이 될 수 있습니다.

Suspense를 데이터 페칭 라이브러리 및 코드 분할 기술과 통합함으로써 React의 동시 모드의 전체 잠재력을 활용하고 진정으로 현대적이고 매력적인 웹 애플리케이션을 만들 수 있습니다. Suspense를 수용하고 React 개발을 다음 단계로 끌어올리십시오.

추가 학습

• React Suspense 문서
• SWR 문서
• TanStack Query 문서
• React 18 발표 (동시 모드)